<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arttemplate</title>
    <script src="./template.js"></script>
    <script>
        function initData() {
            var arr = [
                {name:"abc",age:20,sex:2}, // 1男,2女
                {name:"tom",age:30,sex:1},
                {name:"qqq",age:40,sex:3}
            ];
            // 使用 template 方法, 把 数据 填充到 指定的 模板中
            // 第一个参数是 模板的 id. 模板是 script 标签书写的html代码, 模板id是 该 script 标签的id值
            // 第二个参数是 数据对象(不能是一个数组, 必须是一个 有属性的对象)
            var html = template("usersTemplate", {users: arr, title: "测试arttemplate"});
            // console.log('html:', html);
            document.getElementById("users").innerHTML = html;
        }

        function getSexText(sex){
            var txt;
            switch(sex) {
                case 1:
                    txt = "男";
                    break;
                case 2:
                    txt = "女";
                    break;
                default:
                    txt = "未知";
                    break;
            }
            console.log(sex);
            return txt;
        }
    </script>
</head>
<body>
    <button type="button" onclick="initData()" >initData</button>
    <div>
        <div>数据：</div>
        <div id="users" >
            <div>
                <span>tom,</span>
                <span>30,</span>
                <span>男</span>
            </div>
        </div>
        <!-- 模板一般放在数据填充的位置附近 -->
        <!-- {{}} 这是 arttemplate 的 核心 语法, 其中支持js运算 -->
        <!-- 在该模板中使用 {{属性名}} 获取 传入的 对象的属性值  -->
        <!-- {{each 属性名(要遍历的数组) as 元素别名 下标别名}} 循环体 {{/each}} -->
        <!-- {{user.sex | getSexText}} 调用 js中的 函数 ，把 | 前面的内容作为 | 后面函数的参数 -->
        <script id="usersTemplate" type="text/html" >
            <h2>{{title}}</h2>
            {{each users user index}}
            <div style="color:red;" >
                <span>序号:{{index+1}}, {{user.name}},</span>
                <span>{{user.age}},</span>
                {{if user.sex == 1}}
                <span>男</span>
                {{else if user.sex == 2}}
                <span>女</span>
                {{else}}
                <span>未知</span>
                {{/if}}
                <span>，调用js获取性别：{{user.sex | getSexText}}</span>
            </div>
            {{/each}}
        </script>
    </div>
</body>
</html>